<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品主页</title>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="dist/easySlider.js"></script>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>


</head>
<body>
<div class="header-wrap">
	<div class="navwrap">
		<div id="nav">
			<div class="navbar clearfix">
				<a class="navbt" href="#"><span>购书地图</span></a>
				<a class="current" href="#">首页</a>
				<a href="#">精品书</a>
				<a href="#">技术书</a>
				<a href="#">前段书</a>
				<a href="#">生活服务</a>
				<a href="#">地图</a>
				<a href="#">javascript技术书</a>
			</div>
			<div class="pros subpage">
				<h2>全部购书分类</h2>
				<ul class="prosul clearfix" id="proinfo">
					<li class="food">
						<i>&gt;</i>
						<a class="ti" href="#">技术</a>
						<a class="hot" href="#">教育</a>
						<a href="#">文学</a>
						<div class="prosmore hide">
							<span><em><a href="#">全部(117)</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">心理学</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">国外学</a></em></span>
							<span><em><a href="#">生活</a></em></span>
							<span><em><a href="#">考试</a></em></span>
							<span><em><a href="#"></a></em></span>
							<span><em><a href="#">图谱</a></em></span>
							<span><em><a href="#">人物传记</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">图书文教</a></em></span>
							<span><em><a href="#">影音乐器</a></em></span>
							<span><em><a href="#">小说</a></em></span>
							<span><em><a href="#">浪漫</a></em></span>
						</div>
					</li>
					<li class="enjoy">
						<i>&gt;</i>
						<a class="ti" href="#">休闲</a>
						<a class="hot" href="#">电影介绍</a>
						<a href="#">听书</a>
						<div class="prosmore hide">
							<span><em><a href="#">全部</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">电影介绍</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">春天</a></em></span>
							<span><em><a href="#">你好吗</a></em></span>
							<span><em><a href="#">平凡世界</a></em></span>
							<span><em><a href="#">你和我</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">中国画</a></em></span>
							<span><em><a href="#">技术</a></em></span>
							<span><em><a href="#">网络</a></em></span>
							<span><em><a href="#">心里</a></em></span>
							<span><em><a href="#">百家姓</a></em></span>
							<span><em><a href="#">我和你</a></em></span>
						</div>
					</li>
					<li class="travel">
						<i>&gt;</i>
						<a class="ti" href="#">古典</a>
						<a class="hot" href="#">论语</a>
						<a href="#">古典</a>
						<div class="prosmore hide">
							<span><em><a href="#">全部</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">论语</a></em></span>
							<span><em><a href="#">古典</a></em></span>
							<span><em><a href="#">道德经</a></em></span>
							<span><em><a href="#">其他</a></em></span>
						</div>
					</li>
					<li class="life">
						<i>&gt;</i>
						<a class="ti" href="#">生活</a>
						<a href="#">意林</a>
						<a href="#">写真</a>
						<div class="prosmore hide">
							<span><em><a href="#">意林</a></em></span>
							<span><em><a href="#">写真</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">故事书</a></em></span>
							<span><em><a href="#">商鞅变法</a></em></span>
							<span><em><a href="#">春秋</a></em></span>
							<span><em><a href="#">三国演义</a></em></span>
							<span><em><a href="#">左氏春秋</a></em></span>
							<span><em><a href="#">儒林外史</a></em></span>
							<span><em><a href="#">其他</a></em></span>
						</div>
					</li>
					<li class="women">
						<i>&gt;</i>
						<a class="ti" href="#">浪漫</a>
						<a href="#">我和你</a>
						<a href="#">那一年</a>
						<div class="prosmore hide">
							<span><em><a href="#">全部</a></em></span>
							<span><em class="morehot"><a class="morehot" href="#">希望</a></em></span>
							<span><em><a href="#">初恋之夏</a></em></span>
							<span><em><a href="#">泡沫之夏</a></em></span>
						</div>
					</li>
					<li class="goods bd-solid">
						<i>&gt;</i>
						<a class="ti" href="#">知识</a>
						<a href="#">国外外</a>
						<a href="#">国内</a>
						<div class="prosmore hide">
							<span><em><a href="#">购书</a> </em></span>
							<span><em class="morehot"><a class="morehot" href="#">武侠</a> </em></span>
							<span><em><a href="#">射雕</a> </em></span>
							<span><em><a href="#">飞狐</a> </em></span>
							<span><em><a href="#">神雕</a> </em></span>
							<span><em><a href="#">碧血剑</a> </em></span>
							<span><em><a href="#">枪声</a> </em></span>
							<span><em><a href="#">官场现形记</a> </em></span>
							<span><em><a href="#">范进中举</a> </em></span>
							<span><em><a href="#">西游记</a> </em></span>
							<span><em><a href="#">大刀王五</a> </em></span>
						</div>
					</li>
					<li class="hotareas nochild last">
						<h2>热门搜索</h2>
						<br />
						<a class="mhs" href="#">行书</a>
						<a class="mhs" href="#">新书</a>
						<a class="mhs" href="#">动漫</a>
						<a class="mhs" href="#">电影</a>
						<a class="mhs" href="#">小说</a>
						<a class="mhs" href="#">教育</a>
						<a class="mhs" href="#">生活</a>
						<a class="mhs" href="#">旅游</a>
						<a class="mhs" href="#">文化</a>
						<a class="mhs" href="#">历史</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div id="lanrenzhijia">
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/5.jpg"></div>
       <div class="title"><a href="#">瓦尔登湖+沙乡年鉴¥72.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/6.jpg"></div>
     <div class="title"><a href="#">重口味心理学¥28.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/7.jpg"></div>
    <div class="title"><a href="#">孤独星球¥240.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/8.jpg"></div>
   <div class="title"><a href="#"><<教父>> 三部曲¥110.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/9.jpg"></div>
    <div class="title"><a href="#">巨人的陨落全3册102.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/10.jpg"></div>
    <div class="title"><a href="#">正版 英语入门王¥35.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/11.jpg"></div>
       <div class="title"><a href="#">爱的道路 释净宗¥19.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/12.jpg"></div>
  <div class="title"><a href="#">中国通史 16开精装6册¥135.00 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/13.jpg"></div>
 <div class="title"><a href="#">人类简史 尤瓦尔·赫拉利¥44.20 </a></div>
    </div>
  </div>
  <div class="box">
    <div class="info">
      <div class="pic"><img src="images/14.jpg"></div>
 <div class="title"><a href="#">环球科学杂志订阅¥240.00 </a></div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
	(function(){
		
		var $subblock = $(".subpage"), $head=$subblock.find('h2'), $ul = $("#proinfo"), $lis = $ul.find("li"), inter=false;
		
		$head.click(function(e){
			e.stopPropagation();
			if(!inter){
				$ul.show();
			}else{
				$ul.hide();
			}
			inter=!inter;
		});
		
		$ul.click(function(event){
			event.stopPropagation();
		});
		
		$(document).click(function(){
			$ul.hide();
			inter=!inter;
		});

		$lis.hover(function(){
			if(!$(this).hasClass('nochild')){
				$(this).addClass("prosahover");
				$(this).find(".prosmore").removeClass('hide');
			}
		},function(){
			if(!$(this).hasClass('nochild')){
				if($(this).hasClass("prosahover")){
					$(this).removeClass("prosahover");
				}
				$(this).find(".prosmore").addClass('hide');
			}
		});
		
	})();
		$(function() {
		$("#slider").easySlider( {
			slideSpeed: 500,
			paginationSpacing: "15px",
			paginationDiameter: "12px",
			paginationPositionFromBottom: "20px",
			slidesClass: ".slides",
			controlsClass: ".controls",
			paginationClass: ".pagination"					
		});
	});
window.onload = function(){
	//运行瀑布流主函数
	PBL('lanrenzhijia','box');
	
	//模拟数据
	var data = [{'src':'5.jpg','title':'瓦尔登湖+沙乡年鉴¥72.00'},
				{'src':'6.jpg','title':'重口味心理学¥28.00 '},
				{'src':'7.jpg','title':'孤独星球¥240.00 '},
				{'src':'8.jpg','title':'<<教父>> 三部曲¥110.00'},
				{'src':'9.jpg','title':'巨人的陨落全3册102.00'},
				{'src':'10.jpg','title':'正版 英语入门王¥35.00'},
				{'src':'11.jpg','title':'爱的道路 释净宗¥19.00'},
				{'src':'12.jpg','title':'中国通史 16开精装6册¥135.00 '},
				{'src':'13.jpg','title':'人类简史 尤瓦尔·赫拉利¥44.20'},
				{'src':'14.jpg','title':'环球科学杂志订阅¥240.00'}];
	
	
	//设置滚动加载
	window.onscroll = function(){
		//校验数据请求
		if(getCheck()){
			var lanrenzhijia = document.getElementById('lanrenzhijia');
			for(i in data){
				//创建box
				var box = document.createElement('div');
				box.className = 'box';
				lanrenzhijia.appendChild(box);
				//创建info
				var info = document.createElement('div');
				info.className = 'info';
				box.appendChild(info);
				//创建pic
				var pic = document.createElement('div');
				pic.className = 'pic';
				info.appendChild(pic);
				//创建img
				var img = document.createElement('img');
				img.src = 'images/'+data[i].src;
				img.style.height = 'auto';
				pic.appendChild(img);
				//创建title
				var title = document.createElement('div');
				title.className = 'title';
				info.appendChild(title);
				//创建a标记
				var a = document.createElement('a');
				a.innerHTML = data[i].title;
				title.appendChild(a);
			}
			PBL('lanrenzhijia','box');
		}
	}
}
/**
* 瀑布流主函数
* @param  lanrenzhijia	[Str] 外层元素的ID
* @param  box 	[Str] 每一个box的类名
*/
function PBL(lanrenzhijia,box){
	//	1.获得外层以及每一个box
	var lanrenzhijia = document.getElementById(lanrenzhijia);
	var boxs  = getClass(lanrenzhijia,box);
	//	2.获得屏幕可显示的列数
	var boxW = boxs[0].offsetWidth;
	var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
	lanrenzhijia.style.width = boxW*colsNum+'px';//为外层赋值宽度
	//	3.循环出所有的box并按照瀑布流排列
	var everyH = [];//定义一个数组存储每一列的高度
	for (var i = 0; i < boxs.length; i++) {
		if(i<colsNum){
			everyH[i] = boxs[i].offsetHeight;
		}else{
			var minH = Math.min.apply(null,everyH);//获得最小的列的高度
			var minIndex = getIndex(minH,everyH); //获得最小列的索引
			getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);
			everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
		}
	}
}
/**
* 获取类元素
* @param  warp		[Obj] 外层
* @param  className	[Str] 类名
*/
function getClass(lanrenzhijia,className){
	var obj = lanrenzhijia.getElementsByTagName('*');
	var arr = [];
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == className){
			arr.push(obj[i]);
		}
	}
	return arr;
}
/**
* 获取最小列的索引
* @param  minH	 [Num] 最小高度
* @param  everyH [Arr] 所有列高度的数组
*/
function getIndex(minH,everyH){
	for(index in everyH){
		if (everyH[index] == minH ) return index;
	}
}
/**
* 数据请求检验
*/
function getCheck(){
	var documentH = document.documentElement.clientHeight;
	var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
	return documentH+scrollH>=getLastH() ?true:false;
}
/**
* 获得最后一个box所在列的高度
*/
function getLastH(){
	var lanrenzhijia = document.getElementById('lanrenzhijia');
	var boxs = getClass(lanrenzhijia,'box');
	return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* 设置加载样式
* @param  box 	[obj] 设置的Box
* @param  top 	[Num] box的top值
* @param  left 	[Num] box的left值
* @param  index [Num] box的第几个
*/
var getStartNum = 0;//设置请求加载的条数的位置
function getStyle(box,top,left,index){
    if (getStartNum>=index) return;
    $(box).css({
    	'position':'absolute',
        'top':top,
        "left":left,
        "opacity":"0"
    });
    $(box).stop().animate({
        "opacity":"1"
    },999);
    getStartNum = index;//更新请求数据的条数位置
}
</script>
</html>